<template>
    <div v-if="showMe">
      <back :name="name"></back>
      <div class="login-input">
        <input type="text" id="username" maxlength="16" placeholder="用户名">
        <input type="password" id="userpassword" maxlength="16" placeholder="密码">
        <button class="login-go" @click="login">登录</button>
      </div>
    </div>
</template>

<script>
    // import HeaderComponent from './components/header.vue'
    import back from './../components/home/backTitle.vue'
    import { mapGetters } from 'vuex';
    export default{
      components: {
        back
      } ,
        //父组件传入的数据
        props: {} ,
        //本地数据
        data(){
            return {
                name:'登录',
                showMe: false
            }
        } ,
        //方法
        methods: {
          login:function (){

            var user = document.getElementById('username');
            var password = document.getElementById('userpassword');
            if(user.value == '' || password.value == ''){
              alert('用户名或密码不能为空！');
              return false
            }else{
              if(user.value == this.$store.state.username && password.value == this.$store.state.password){

                this.$store.commit("setIsLogin",true)
                this.$store.commit("setWhichPage","myzone")
//                this.$store.state.isLogin = true;
                this.$router.push({"name":"user"});
              }else {
                alert('密码或账户错误！')
              }
            }
          }
        } ,
        //进入页面加载
        mounted () {
           // 设置当前状态为加载中
          this.$store.dispatch('setLoading', true);
          // 模拟请求等待
          var time = Math.floor(Math.random() * 2000);
          console.log('模拟加载用时' + time);
          setTimeout(() => {
            // 页面显示

            this.$store.dispatch('setLoading', false);
            this.showMe = true;
          }, time);
        } ,
        //计算属性
        computed: {

        } ,
        //监控数据变化
        watch: {}

    }
</script>

<style lang="less" scoped>
.login-input{
  width: 100%;
  height: 1.5rem;
  padding-top: 0.15rem;
  text-align: center;
}
  input{
    width: 100%;
    height:0.35rem;
    border: 0;
    outline:medium;
    padding-left: 0.15rem;
    font-size: 0.16rem;
  }
  .login-go{
    width: 90%;
    height: 0.4rem;
    background: #4cd964;
    border:0;
    border-radius: 0.04rem;
    color: #fff;
    font-size: 0.18rem;
    margin-top: 0.25rem;
    outline:medium;
  }
</style>
